<template>
  <div class="showSearch">
      <scroll class="content">
        <search-item class="searchItem" v-for="(item,index) of productListRst" :key="index" :areaName=item></search-item>
      </scroll>
  </div>
</template>

<script>
import Scroll from '../../../components/common/scroll/Scroll.vue'
import searchItem from './searchItem.vue'
export default {
  name: 'showSearch',
  components: {
    searchItem,
    Scroll,
  },
  data() {
    return {
      productList: [],
      productListRst: [],
      searchNewValue:''
    }
  },
  mounted() {
    //封装防抖函数避免多次搜索
    const inputChange = this.debounce(this.searchInputChange,500)
    // 接收来自ChageMap的地点列表，方法位于initChart中
    this.$bus.$on('getAreaName',this.getAreaName)
    // 接收来自输入框的值，方法来自监听属性
    this.$bus.$on('changeSearchValue',(value) => {
      inputChange(value)
    })
    // console.log('this.searchNewValue',this.searchNewValue);
    // this.searchInputChange(searchNewValue)
  },
  methods: {
    debounce(func,delay){
      let timer = null;
      //return是为了对函数进行二次封装，...args是rest参数，多个参数会以数组形式传入
      return function(...args){
        //如果delay期间内，目标函数被再次调用则重新计时
        if(timer) clearTimeout(timer)
        timer = setTimeout(() => {
          //apply的作用是改变函数this指向，与call的区别是可以将数组入参变为一般入参
          func.apply(this, args)
        },delay)
        //怎么才能在全局作用域中获取函数作用域中的值呢
        //这里有两处地方应用到了闭包，1 timer 2 
        //当一个函数内部返回了一个匿名函数，该匿名函数除了自身携带的物品外（内部的变量对象），还背着一个背包（通过作用域链引用的外部函数的变量对象）。在该函数外部就可以通过这个背包来访问这个函数内部的变量了。
        //创建闭包的方式，就是在一个函数内部返回一个匿名函数。

      }
    },
    getAreaName(productList) {
      this.productList = productList
    },
     // 每次search框变化则进行筛选,对数据进行逻辑处理
      searchInputChange(value) {
          // 若未输入值，则展示所有数据
          if(null === value || undefined === value){
              this.productListRst = this.productList;
          } else {
              this.productListRst = []; // 结果列表置空
              let regStr =  '';
              // 初始化正则表达式
              for(let i=0; i<value.length; i++){
                regStr = regStr + '(' + value[i] + ')([\\s]*)'; //跨字匹配
              }
              let reg = new RegExp(regStr);
              // console.log(reg);
              for(let i=0; i<this.productList.length; i++){
              let name = this.productList[i]; //按照名字匹配
              let regMatch = name.match(reg);
              if(null !== regMatch) {// 将匹配的数据放入结果列表中
                  this.productListRst.push(this.productList[i]);
              }
              }
          }
      },
  },
}
</script>

<style scoped>
  .showSearch {
    display: block;
    background-color: rgb(180, 244, 248);
    border: 1px solid #fff;
    height: 100px;
    width: 140px;
    position: absolute;
    top: 85%;
    right: 14%;
    padding-right: 5px;
    overflow: auto;

  }

  .content{
    display: block;
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 999999999999;
  }
</style>>
